<template>
  <div id="home">
    <home-head/>
    <div class="wrap2">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <!-- 加:src是因为这样可以变成js环境，不然就会变成字符串 -->
        <!-- 加上冒号会首先将这个属性当作变量解析  没加冒号就直接是字符串 -->
        <img :src="banner.picUrl" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- /轮播 -->
    <!-- 宫格 -->
    <van-grid clickable :column-num="3">
      <van-grid-item
        v-for="cate in cates"
        :key="cate.id"
        :icon="cate.icon"
        @click="enterList(cate.id)"
        :text="cate.name" />
    </van-grid>
    <!-- /宫格 -->
    <van-list
      v-model="loading"
      :offset="50"
      :finished="finished"
      finished-text="--我也是有底线的--"
      @load="onLoad"
    >
    <!-- 推荐蛋糕 -->
    <cakes :items ='items' @clickCart="addCart" @clickItem="enterDetail"/>
    </van-list>
    <!-- /推荐蛋糕 -->
    </van-pull-refresh>
    </div>
    <common-tab/>
  </div>
</template>

<script>
import { fetchCates, fetchSwipe, fetchItem, addCart } from 'api'
import CommonTab from 'components/CommonTab'
import HomeHead from './components/HomeHead'
import Cakes from './components/Cakes'
import { isLogin, getToken } from 'utils'
import { Toast } from 'vant'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      isLoading: false, // 是否处于下拉刷新中
      page: 1,
      pageSize: 5,
      loading: false, // 是否处于上拉加载中
      finished: false // 是否触底
    }
  },
  created () {
    this.fetchCates()
    this.fetchSwipe()
  },
  methods: {
    addCart ({ id }) {
      // 加入购物车的动作 需要登录才能访问
      if (!isLogin()) {
        // 没有登录
        Toast.fail({
          message: '请登录',
          duration: 1000,
          onClose: () => {
            // 跳转到登录页
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
        return false
      }
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success('宝贝已加入成功，赶快去购买吧！')
          this.$store.commit('cart/set_items', res.data.data.items)
        }
      })
    },
    // 动态路由传参，在route里面的path传参，在父组件接收
    enterList (id) {
      this.$router.push(`/itemList/${id}`)
    },
    enterDetail ({ id }) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    onLoad () {
      // 上拉加载
      this.fetchItem()
      this.page++
    },
    onRefresh () {
      // 将下拉加载状态初始化
      // 回到第一页
      this.page = 1
      // 将数据情空
      this.items = []
      // 将finished的状态已完成改成未完成
      this.finished = false
      // 下拉刷新
      this.fetchItem()
    },
    fetchItem () {
      fetchItem({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 数据一旦请求回来,立刻停止刷新
        this.isLoading = false
        if (res.data.code === 700) {
          this.loading = false
          this.finished = true
        }
        if (res.data.code === 0) {
          this.loading = false
          this.items = [
            ...this.items,
            ...res.data.data.result
          ]
        }
      })
    },
    fetchSwipe () {
      fetchSwipe().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    }
  },
  components: {
    CommonTab,
    HomeHead,
    Cakes
  }
}
</script>

<style lang="scss" scoped>
.wrap2{
  padding: 50px 0;
}
.my-swipe{
  img{
    width: 100%;
  }
}
</style>
